<template>
    <view class="designer_index_page flex-col">

        <view class="block_2 flex-col">
            <view class="group_1 flex-col">
                <view class="group_2 flex-row">
                    <text class="text_3">张艺欢</text>
                    <view class="block_3 flex-col justify-between">
                        <div class="section_2 flex-col"></div>
                        <text class="text_4">7年经验</text>
                    </view>
                    <view class="icon_2 flex-col">
                        <image class="thumbnail_5" referrerpolicy="no-referrer"
                            src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG7dd5a4da7265f413f68dc8183fdcc713.png" />
                        <view class="block_4 flex-col"></view>
                    </view>
                </view>
                <text class="text_5">擅长：简约&nbsp;|&nbsp;现代&nbsp;|&nbsp;中式</text>
                <view class="group_3 flex-row justify-between">
                    <view class="box_5 flex-col"></view>
                    <view class="tag_1 flex-col"></view>
                </view>
                <view class="image-wrapper_1 flex-row">
                    <image class="image_2" referrerpolicy="no-referrer" :src="item.lanhuimage0"
                        v-for="(item, index) in loopData0" :key="index" />
                </view>
                <view class="group_4 flex-row justify-between">
                    <view class="text-wrapper_1 flex-col">
                        <text class="text_6">预约设计师</text>
                    </view>
                    <view class="image-text_1 flex-row justify-between">
                        <text class="text-group_1">下滑查看更多</text>
                        <image class="thumbnail_6" referrerpolicy="no-referrer"
                            src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG289579afe7c5c13194afd656d127d5cd.png" />
                    </view>
                </view>
                <text class="text_7">作品数量：22</text>
                <text class="text_8">在建工地：3</text>
            </view>
        </view>
    </view>
</template>
<script setup>
import { } from 'vue'

const loopData0 = [
    {
        lanhuimage0:
            'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG1ce5b0b195f61e2104f1825890ec632f.png',
    },
    {
        lanhuimage0:
            'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG7e1bbd13ab616ffa9943146526da15c5.png',
    },
    {
        lanhuimage0:
            'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG72ff1cbb5f6b4b9335051dade1a09b0f.png',
    },
]
</script>
<style scoped lang="scss">
.designer_index_page {
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    width: 750rpx;
    height: 1624rpx;
    overflow: hidden;

    .block_1 {
        width: 750rpx;
        height: 178rpx;

        .box_1 {
            width: 682rpx;
            height: 36rpx;
            margin: 30rpx 0 0 42rpx;

            .text_1 {
                width: 108rpx;
                height: 36rpx;
                overflow-wrap: break-word;
                color: rgba(0, 0, 0, 1);
                font-size: 30rpx;
                letter-spacing: -0.30000001192092896px;
                font-family: AlibabaPuHuiTi-Regular;
                font-weight: normal;
                text-align: center;
                white-space: nowrap;
                line-height: 36rpx;
            }

            .thumbnail_1 {
                width: 34rpx;
                height: 22rpx;
                margin: 6rpx 0 0 438rpx;
            }

            .thumbnail_2 {
                width: 32rpx;
                height: 22rpx;
                margin: 6rpx 0 0 10rpx;
            }

            .image_1 {
                width: 50rpx;
                height: 24rpx;
                margin: 6rpx 0 0 10rpx;
            }
        }

        .box_2 {
            height: 102rpx;
            margin-top: 10rpx;
            width: 750rpx;

            .box_3 {
                width: 750rpx;
                height: 102rpx;

                .nav-bar_1 {
                    width: 750rpx;
                    height: 102rpx;

                    .icon_1 {
                        width: 18rpx;
                        height: 34rpx;
                        margin: 40rpx 0 0 36rpx;
                    }

                    .text_2 {
                        width: 168rpx;
                        height: 40rpx;
                        overflow-wrap: break-word;
                        color: rgba(0, 0, 0, 0.9);
                        font-size: 34rpx;
                        font-family: AlibabaPuHuiTi-Regular;
                        font-weight: normal;
                        text-align: center;
                        white-space: nowrap;
                        line-height: 40rpx;
                        margin: 32rpx 0 0 238rpx;
                    }

                }

                .section_1 {
                    background-color: rgba(0, 0, 0, 0.1);
                    width: 750rpx;
                    height: 2rpx;
                    margin: 100rpx 0 0 -750rpx;
                }
            }
        }
    }

    .block_2 {
        height: 1448rpx;
        background: url(https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG1ae1c4310677d3e6d2bcfba55fcdfdc4.png) 100% no-repeat;
        background-size: 100% 100%;
        width: 750rpx;
        position: absolute;
        left: 0;
        top: 176rpx;

        .group_1 {
            background-color: rgba(255, 255, 255, 0.5);
            position: relative;
            width: 540rpx;
            height: 540rpx;
            margin: 908rpx 0 0 210rpx;

            .group_2 {
                width: 466rpx;
                height: 48rpx;
                margin: 60rpx 0 0 44rpx;

                .text_3 {
                    width: 144rpx;
                    height: 40rpx;
                    overflow-wrap: break-word;
                    color: rgba(0, 0, 0, 1);
                    font-size: 48rpx;
                    font-family: Songti SC-黑体;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                    margin-top: 4rpx;
                }

                .block_3 {
                    width: 106rpx;
                    height: 28rpx;
                    margin: 8rpx 0 0 22rpx;

                    .section_2 {
                        width: 34rpx;
                        height: 2rpx;
                    }

                    .text_4 {
                        width: 98rpx;
                        height: 24rpx;
                        overflow-wrap: break-word;
                        color: rgba(0, 0, 0, 1);
                        font-size: 28rpx;
                        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 24rpx;
                        margin: 2rpx 0 0 8rpx;
                    }
                }

                .icon_2 {
                    box-shadow: 3px 6px 10px 0px rgba(97, 52, 27, 0.15);
                    background-color: rgba(97, 52, 27, 1);
                    height: 48rpx;
                    margin-left: 146rpx;
                    width: 48rpx;
                    position: relative;

                    .thumbnail_5 {
                        width: 30rpx;
                        height: 30rpx;
                        margin: 10rpx 0 0 10rpx;
                    }

                    .block_4 {
                        background-color: rgba(247, 53, 53, 1);
                        border-radius: 50%;
                        position: absolute;
                        left: 38rpx;
                        top: -8rpx;
                        width: 16rpx;
                        height: 16rpx;
                    }
                }
            }

            .text_5 {
                width: 308rpx;
                height: 28rpx;
                overflow-wrap: break-word;
                color: rgba(0, 0, 0, 1);
                font-size: 28rpx;
                font-family: Songti SC-细体;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 28rpx;
                margin: 16rpx 0 0 44rpx;
            }

            .group_3 {
                width: 316rpx;
                height: 36rpx;
                margin: 30rpx 0 0 44rpx;

                .box_5 {
                    background-color: rgba(97, 52, 27, 0.07);
                    border-radius: 1px;
                    width: 154rpx;
                    height: 36rpx;
                }

                .tag_1 {
                    background-color: rgba(97, 52, 27, 0.07);
                    border-radius: 1px;
                    width: 142rpx;
                    height: 36rpx;
                }
            }

            .image-wrapper_1 {
                width: 424rpx;
                height: 152rpx;
                justify-content: space-between;
                margin: 14rpx 0 0 44rpx;

                .image_2 {
                    width: 128rpx;
                    height: 152rpx;
                    margin-right: 20rpx;
                }
            }

            .group_4 {
                width: 416rpx;
                height: 84rpx;
                margin: 32rpx 0 40rpx 44rpx;

                .text-wrapper_1 {
                    box-shadow: 2px 4px 10px 0px rgba(0, 0, 0, 0.5);
                    background-color: rgba(0, 0, 0, 1);
                    height: 84rpx;
                    width: 216rpx;

                    .text_6 {
                        width: 156rpx;
                        height: 30rpx;
                        overflow-wrap: break-word;
                        color: rgba(255, 255, 255, 1);
                        font-size: 30rpx;
                        letter-spacing: 7px;
                        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 30rpx;
                        margin: 28rpx 0 0 30rpx;
                    }
                }

                .image-text_1 {
                    width: 180rpx;
                    height: 30rpx;
                    margin-top: 28rpx;

                    .text-group_1 {
                        width: 150rpx;
                        height: 30rpx;
                        overflow-wrap: break-word;
                        color: rgba(244, 244, 244, 1);
                        font-size: 24rpx;
                        letter-spacing: 7px;
                        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 30rpx;
                    }

                    .thumbnail_6 {
                        width: 24rpx;
                        height: 24rpx;
                        margin-top: 2rpx;
                    }
                }
            }

            .text_7 {
                position: absolute;
                left: 54rpx;
                top: 180rpx;
                width: 134rpx;
                height: 40rpx;
                overflow-wrap: break-word;
                color: rgba(97, 52, 27, 1);
                font-size: 22rpx;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 40rpx;
            }

            .text_8 {
                position: absolute;
                left: 228rpx;
                top: 180rpx;
                width: 122rpx;
                height: 40rpx;
                overflow-wrap: break-word;
                color: rgba(97, 52, 27, 1);
                font-size: 22rpx;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 40rpx;
            }
        }
    }
}
</style>